<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-08 21:42:12
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-02-01 22:58:13
 * @FilePath: /tuberculosis_screening_app/src/components/common/PatientCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- <div class="info-column">
      <CellGroup :width="100" justify class="grid column_2">
        <Cell class="grid-item" label="姓名">张三</Cell>
        <Cell class="grid-item" label="年龄">20岁</Cell>
        <Cell class="grid-item column_2" label="身份证"
          >620423190012121111</Cell
        >
      </CellGroup>
    </div> -->

  <div class="patient">
    <div class="card">
      <div class="align-items_center">
        <van-image
          class="avatar mr_sm"
          round
          width="3rem"
          height="3rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />

        <div class="flex">
          <div class="justify_between align-items_center">
            <p class="name">简一</p>
          </div>
          <div class="justify_between align-items_center">
            <p class="card-num">620423198812121212</p>
          </div>
        </div>
        <div></div>
      </div>
      <hr class="mt_sm" />
      <div class="align-items_center justify_between mt_sm">
        <span class="card-num">24岁</span>
        <span class="card-num">男</span>

        <span class="card-num">藏族</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { navigate } from '@/service/navigate';
import { Cell, CellGroup } from '@/components/common/Cell/index.ts';

export default defineComponent({
  components: {
    Cell,
    CellGroup,
  },
  setup() {
    return {
      navigate,
    };
  },
});
</script>

<style lang="scss" scoped>
.info-column {
  line-height: 1.8;
}

.patient {
  border: unset;
}
</style>

